<template>
  <div class="channelsnews">
    <div class="newstitle">{{channelName}}</div>
    <Loading v-if="isLoading"></Loading>
    <News :news="news" class="shownews" v-else></News>
    <Pager
      :page="page"
      :total="total"
      :limit="limit"
      :pageBox="pageBox"
      @pageChange="pageChange"
      class="newspager"
    ></Pager>
  </div>
</template>

<script>
import Pager from "@/components/Pager.vue";
import News from "@/components/news/News.vue";
import Loading from "@/components/Loading.vue";
import * as Services from "@/services/services.js";
export default {
  components: {
    Pager,
    News,
    Loading
  },
  data() {
    return {
      channelName: "",
      news: [],
      total: 0,
      limit: 10,
      pageBox: 10,
      isLoading: true
    };
  },
  computed: {
    page() {
      return +this.$route.query.page || 1;
    }
  },
  watch: {
    "$route.params.id": {
      immediate: true,
      handler() {
        this.setChannelName();
        this.setNews();
      }
    }
  },
  methods: {
    pageChange(newPage) {
      this.$router.push({
        query: {
          page: newPage
        }
      });
      this.setNews();
    },
    async setChannelName() {
      let channels = await Services.getChannels();
      let channel = channels.find(
        item => item.channelId == this.$route.params.id
      );
      this.channelName = channel.name;
    },
    async setNews() {
      this.isLoading = true;
      let newsList = await Services.getNews(
        this.$route.params.id,
        this.limit,
        this.page
      );
      // console.log(newsList);
      this.total = newsList.allNum;
      this.news = newsList.contentlist;
      this.isLoading = false;
    }
  }
};
</script>

<style scoped>
.newstitle {
  font-size: 35px;
  font-weight: 300;
  color: #888;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}
.shownews {
  margin-bottom: 50px;
}
.newspager {
  margin-bottom: 90px;
}
</style>